<template>
    <div :class="{ 'header-transparent-with-topbar': data.headerTransparency }">
        <!-- Start Header Top Area -->
        <div v-if="data.showTopHeader && data.topbarStyle === 1" class="header-top-news">
        </div>
        <!-- End Header Top Area -->

        <!-- <div v-if="data.showTopHeader && data.topbarStyle === 2"
             class="header-top-bar">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-4 col-md-12 col-12">
                        <div class="header-left">
                            <p><a href="#">Get the most advanced template <Icon name="chevron-right"/></a></p>
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-12 col-12">
                        <div class="header-right">
                            <div class="address-content">
                                <p><Icon name="map-pin"/><span>Alabama, USA</span></p>
                                <p><Icon name="phone"/><span><a href="#">+06 58 49 99 56</a></span></p>
                            </div>
                            <div class="social-icon-wrapper">
                                <ul class="social-icon social-default icon-naked">
                                    <li><a target="_blank" href="https://www.facebook.com/"><Icon name="facebook"/></a></li>
                                    <li><a target="_blank" href="https://www.twitter.com"><Icon name="twitter"/></a></li>
                                    <li><a target="_blank" href="https://www.instagram.com"><Icon name="instagram"/></a></li>
                                    <li><a target="_blank" href="https://www.linkedin.com"><Icon name="linkedin"/></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->

        <!-- Start Header Area -->
        <header :class="[`rn-header header-default header-not-transparent header-sticky ${data.headerClass}`]">
            <div class="container position-relative">
                <div class="row align-items-center row--0">
                    <template>
                        <img src="../../../assets/images/banner/topbanner.png" alt="" class="BannerBgc"
                            v-show="this.$route.path == '/home' || this.$route.path == '/' || this.$route.path == '/feedback'">
                        <img src="../../../assets/images/banner/chanpinbgc.png" alt="" class="BannerBgc"
                            v-show="this.$route.path == '/product'">
                        <img src="../../../assets/images/banner/chanpinbgc.png" alt="" class="BannerBgc"
                            v-show="this.$route.path == '/productdetails'">
                        <img src="../../../assets/images/banner/jiejuebgc.png" alt="" class="BannerBgc"
                            v-show="this.$route.path == '/helper'">
                        <img src="../../../assets/images/banner/jiejuebgc.png" alt="" class="BannerBgc"
                            v-show="this.$route.path == '/seekadfrom'">
                        <!-- <img src="../../../assets/images/banner/xinwenbgc.png" alt="" class="BannerBgc"
                            v-show="this.$route.path == '/newscontion'">
                        <img src="../../../assets/images/banner/xinwenbgc.png" alt="" class="BannerBgc"
                            v-show="this.$route.path == '/newsdetail'"> -->
                        <img src="../../../assets/images/banner/bangzhubgc.png" alt="" class="BannerBgc"
                            v-show="this.$route.path == '/helpcenter'">
                        <img src="../../../assets/images/banner/guanyubgc.png" alt="" class="BannerBgc"
                            v-show="this.$route.path == '/about'">

                        <img src="../../../assets/images/banner/homebottom.png" alt=""
                            v-show="this.$route.path == '/home' || this.$route.path == '/'" class="Bannerbottom">
                        <img src="../../../assets/images/banner/homebottom.png" alt=""
                            v-show="this.$route.path == '/product'" class="Bannerbottom2">
                        <img src="../../../assets/images/banner/homebottom.png" alt=""
                            v-show="this.$route.path == '/productdetails'" class="Bannerbottom2">
                        <img src="../../../assets/images/banner/homebottom.png" alt=""
                            v-show="this.$route.path == '/helper'" class="Bannerbottom3">
                        <!-- <img src="../../../assets/images/banner/homebottom.png" alt=""
                            v-show="this.$route.path == '/newscontion'" class="Bannerbottom4">
                        <img src="../../../assets/images/banner/homebottom.png" alt=""
                            v-show="this.$route.path == '/newsdetail'" class="Bannerbottom4"> -->
                        <img src="../../../assets/images/banner/homebottom.png" alt=""
                            v-show="this.$route.path == '/helpcenter'" class="Bannerbottom4">
                        <img src="../../../assets/images/banner/homebottom.png" alt=""
                            v-show="this.$route.path == '/about'" class="Bannerbottom5">


                        <div class="col-lg-9 col-md-6 col-4 position-static">
                            <div class="header-left d-flex">
                                <Logo />
                                <nav class="mainmenu-nav d-none d-lg-block" style="margin-left: 30px;">
                                    <Nav />
                                </nav>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-8">
                            <div class="header-right">

                                <!-- <div class="header-btn">
                                    <router-link to="/zmLogin"><a href="#" style="color: #fff;">登录</a></router-link>
                                    <span style="margin: 0px 5px;"></span>
                                    <router-link to="/register"><button type="button" class="btn btn-primary">免费注册</button></router-link>
                                    <el-dropdown trigger="click">
                                        <span class="el-dropdown-link" style="color: #fff;font-size: 12px;">
                                            简体中文<i class="el-icon-arrow-down el-icon--right"></i>
                                        </span>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item>简体中文</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div> -->

                                <!-- <div class="header-btn">
                                    <a href="mailto:info@tejinrui.hk">info@tejinrui.hk</a>
                                </div> -->

                                <div class="mobile-menu-bar ml--5 d-block d-lg-none">
                                    <div class="hamberger">
                                        <button class="hamberger-button"
                                            @click.prevent="AppFunctions.toggleClass('.popup-mobile-menu', 'active')">
                                            <Icon name="menu" size="21" />
                                        </button>
                                    </div>
                                </div>

                                <!-- <div v-if="data.showThemeSwitcherButton" id="my_switcher" class="my_switcher">
                                    <ul>
                                        <li>
                                            <a href="javascript: void(0);"
                                               @click.prevent="AppFunctions.toggleClass('body', 'active-light-mode')">
                                                <img class="light-icon"
                                                     src="../../../assets/images/icons/sun-01.svg"
                                                     alt="Sun images">
                                                <img class="dark-icon"
                                                     src="../../../assets/images/icons/vector.svg"
                                                     alt="Moon Images">
                                            </a>
                                        </li>
                                    </ul>
                                </div> -->
                            </div>
                        </div>

                    </template>
                </div>
            </div>
        </header>
        <!-- End Header Area -->

        <!-- Start Mobile Menu -->
        <MobileMenu />
        <!-- End Mobile Menu -->

        <!-- Start Theme Style -->
        <!-- <div>
            <div class="rn-gradient-circle"/>
            <div class="rn-gradient-circle theme-pink"/>
        </div> -->
        <!-- End Theme Style -->
    </div>
</template>

<script>
import Icon from '../../icon/Icon'
import MobileMenu from './MobileMenu'
import AppFunctions from '../../../helpers/AppFunctions'
import Nav from './Nav'
import Logo from '../../elements/logo/Logo'

export default {
    name: 'Header',
    props: {
        data: {
            default: null
        }
    },
    components: { Logo, Nav, MobileMenu, Icon },
    data() {
        return {
            AppFunctions
        }
    },
    methods: {
        toggleStickyHeader() {
            const scrolled = document.documentElement.scrollTop;
            if (scrolled > 100) {
                AppFunctions.addClass('.header-default', 'sticky');
            } else if (scrolled <= 100) {
                AppFunctions.removeClass('.header-default', 'sticky');
            }
        }
    },
    created() {
        window.addEventListener('scroll', this.toggleStickyHeader);
        console.log('当前路由路径:');
    },
    mounted() {
        this.toggleStickyHeader();
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.toggleStickyHeader);
    }
}
</script>

<style lang="scss" scoped>
.row>* {
    padding-right: 0px;
    padding-left: 0px;
}

.BannerBgc {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: -1;
    /* 将图片放在内容的底层 */
}

.Bannerbottom {
    position: absolute;
    bottom: -36%;
    left: 10.2%;
    width: 6%;
    height: 60px;
}

.Bannerbottom2 {
    position: absolute;
    bottom: -36%;
    left: 15.9%;
    width: 6%;
    height: 60px;
}

.Bannerbottom3 {
    position: absolute;
    bottom: -36%;
    left: 22.7%;
    width: 6%;
    height: 60px;
}

.Bannerbottom4 {
    position: absolute;
    bottom: -36%;
    left: 29.5%;
    width: 6%;
    height: 60px;
}

.Bannerbottom5 {
    position: absolute;
    bottom: -36%;
    left: 36.2%;
    width: 6%;
    height: 60px;
}

.Bannerbottom6 {
    position: absolute;
    bottom: -36%;
    left: 43.1%;
    width: 6%;
    height: 60px;
}
@media screen and (max-width: 1400px) {
    .Bannerbottom {
        position: absolute;
        bottom: -36%;
        left: 12.2%;
        width: 6%;
        height: 60px;
    }

    .Bannerbottom2 {
        position: absolute;
        bottom: -36%;
        left: 18.9%;
        width: 6%;
        height: 60px;
    }

    .Bannerbottom3 {
        position: absolute;
        bottom: -36%;
        left: 26.7%;
        width: 6%;
        height: 60px;
    }

    .Bannerbottom4 {
        position: absolute;
        bottom: -36%;
        left: 34.5%;
        width: 6%;
        height: 60px;
    }

    .Bannerbottom5 {
        position: absolute;
        bottom: -36%;
        left: 42.5%;
        width: 6%;
        height: 60px;
    }

    .Bannerbottom6 {
        position: absolute;
        bottom: -36%;
        left: 50.5%;
        width: 6%;
        height: 60px;
    }
}
@media screen and (max-width: 1199px) {
    .Bannerbottom {
        position: absolute;
        bottom: -36%;
        left: 14.2%;
        width: 6%;
        height: 60px;
    }

    .Bannerbottom2 {
        position: absolute;
        bottom: -36%;
        left: 20.9%;
        width: 6%;
        height: 60px;
    }

    .Bannerbottom3 {
        position: absolute;
        bottom: -36%;
        left: 28.7%;
        width: 6%;
        height: 60px;
    }

    .Bannerbottom4 {
        position: absolute;
        bottom: -36%;
        left: 36.5%;
        width: 6%;
        height: 60px;
    }

    .Bannerbottom5 {
        position: absolute;
        bottom: -36%;
        left: 44.5%;
        width: 6%;
        height: 60px;
    }

    .Bannerbottom6 {
        position: absolute;
        bottom: -36%;
        left: 52.5%;
        width: 6%;
        height: 60px;
    }
    @media screen and (max-width: 990px) {
    .Bannerbottom {
       display: none;
    }

    .Bannerbottom2 {
        display: none;

    }

    .Bannerbottom3 {
        display: none;

    }

    .Bannerbottom4 {
        display: none;

    }

    .Bannerbottom5 {
        display: none;

    }

    .Bannerbottom6 {
        display: none;

    }
}
}
</style>